<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
    textarea {
        border: 1px #aaa solid;
        resize: none;
        background-color: #eee;
    }

    .commentId {
        color: #66cfcf;
    }

    .commentContent {
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: Roboto-Regular;
    }

    .commentWeaken {
        color: #99a2aa;
        font-size: 12px;
    }

    .commentOption {
        margin-left: 10px;
    }

    a:hover, a:link {
        text-decoration: none;
    }
</style>
<script>
    function getReplyBox() {
        document.getElementById("comment_reply").style.display = '';
    }
</script>
<div style="margin-top: 50px">
    <div>
        <form action="${pageContext.request.contextPath}/user_comment" method="post">
            <input type="hidden" name="username"
                   value="${empty sessionScope.get("user").name?"游客用户":sessionScope.get("user").name}"/>
            <input type="hidden" name="commitDate"
                   value="<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())%>"/>
            <div class="pull-left" style="width: 400px">
                <textarea class="table table-bordered"
                          name="commitContent" rows="5" cols="120"
                          style="background-color: #f4f5f7;"
                          placeholder="您的评论和意见对我们很重要！"></textarea>
            </div>
            <div class="pull-left">
                <input class="btn-lg btn-success"
                       style="background-color: #5d4b33;
                       height: 106px;width:106px;
                       border-radius:5px;
                       border: 0;
                       margin-left: 10px"
                       type="submit"
                       value="发送">
            </div>
            <div class="clearfix"></div>
        </form>
        <hr>

        <c:forEach items="${requestScope.commentList}" var="comment">
            <div>
                <div>
                    <span class="commentId">#${comment.id}</span>
                    <span class="commentWeaken commentOption">${comment.username}</span>
                </div>
                <div class="commentContent">${comment.commentContent}</div>
                <div>
                    <span class="commentWeaken">${comment.commentDate}</span>
                    <a id="like_${comment.id}" class="commentOption"
                       href="${pageContext.request.contextPath}/user_like?like=yes&id=${comment.id}">
                        <img src="${pageContext.request.contextPath}/images/comment-like${sessionScope.likeSet.contains(comment.id)?"-active":""}.png"
                             alt="#"
                             width="20px"
                             height="20px">
                        <span class="commentWeaken">${comment.likeNum==0?"":comment.likeNum}</span>
                    </a>
                    <a id="noLike" class="commentOption"
                       href="${pageContext.request.contextPath}/user_like?like=no&id=${comment.id}">
                        <img src="${pageContext.request.contextPath}/images/comment-nolike${sessionScope.noLikeSet.contains(comment.id)?"-active":""}.png"
                             alt="#"
                             width="20px"
                             height="20px">
                        <span class="commentWeaken">${comment.noLikeNum==0?"":comment.noLikeNum}</span>
                    </a>
                    <a onclick="getReplyBox()" class="commentOption" href="javascript:void(0)"><span
                            class="commentWeaken">回复</span></a>
                </div>

                <!-- 回复框 -->
                <form id="comment_reply" action="${pageContext.request.contextPath}/user_reply" method="post"
                      style="margin-left: 50px;display: none"
                >
                    <input type="hidden" name="replyId" value="${comment.id}">
                    <input type="hidden" name="username"
                           value="${empty sessionScope.get("user").name?"游客用户":sessionScope.get("user").name}"/>
                    <input type="hidden" name="commitDate"
                           value="<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())%>"/>
                    <div class="pull-left" style="width: 400px">
                    <textarea class="table table-bordered"
                              name="commitContent" rows="2" cols="80"
                              style="background-color: #f4f5f7;"
                              placeholder="@${comment.username}: "></textarea>
                    </div>
                    <div class="pull-left">
                        <input class="btn btn-success"
                               style="background-color: #5d4b33;
                               text-align: center;
                               height: 44px;width:50px;
                               border-radius:5px;
                               border: 0;
                               margin-left: 10px"
                               type="submit"
                               value="回复">
                    </div>
                    <div class="clearfix"></div>
                </form>
                    <%-- 回复区 --%>
                <div>
                    <c:if test="${comment.reply != null && not empty comment.reply}">
                        <c:set var="replys"
                               value="${comment.reply.substring(0, comment.reply.length() - 1)}"
                               scope="request"/>

                        <c:if test="${replys.contains('║')}">
                            <c:set var="replyss" value="${replys.split('║')}"/>
                            <c:forEach items="${replyss}" var="re">
                                <c:set var="commentFromJson"
                                       value="${requestScope.Gson.fromJson(re,requestScope.commentClass)}"
                                       scope="request"/>
                                <%-- 回复楼中楼 --%>
                                <div style="margin-left: 50px">
                                    <div>
                                        <span class="commentWeaken">${commentFromJson.username}</span>
                                    </div>
                                    <div class="commentContent">
                                        <a href="">@${comment.username}:</a>
                                            ${commentFromJson.commentContent}
                                    </div>

                                    <div>
                                        <span class="commentWeaken">${commentFromJson.commentDate}</span>
                                            <%-- 回复的楼目前禁止用户行为--%>
                                        <a id="like_${comment.id}" class="commentOption disabled"
                                           href="javascript:void(0)">
                                                <%--                                           href="${pageContext.request.contextPath}/user_like?like=yes&id=${comment.id}">--%>
                                            <img src="${pageContext.request.contextPath}/images/comment-like.png"
                                                <%--                                            <img src="${pageContext.request.contextPath}/images/comment-like${sessionScope.likeSet.contains(comment.id)?"-active":""}.png"--%>
                                                 alt="#"
                                                 width="20px"
                                                 height="20px">
                                                <%--                                            <span class="commentWeaken">${commentFromJson.likeNum==0?"":commentFromJson.likeNum}</span>--%>
                                        </a>
                                        <a class="commentOption disabled"
                                           href="javascript:void(0)">
                                                <%--                                           href="${pageContext.request.contextPath}/user_like?like=no&id=${comment.id}">--%>
                                            <img src="${pageContext.request.contextPath}/images/comment-nolike.png"
                                                <%--                                            <img src="${pageContext.request.contextPath}/images/comment-nolike${sessionScope.noLikeSet.contains(comment.id)?"-active":""}.png"--%>
                                                 alt="#"
                                                 width="20px"
                                                 height="20px">
                                                <%--                                            <span class="commentWeaken">${commentFromJson.noLikeNum==0?"":commentFromJson.noLikeNum}</span>--%>
                                        </a>
                                        <a onclick="" class="commentOption disabled" href="javascript:void(0)">
                                            <span class="commentWeaken">回复</span>
                                        </a>

                                    </div>
                                        <%-- 回复楼中楼 --%>
                                </div>
                                <br/>
                            </c:forEach>
                        </c:if>
                    </c:if>
                </div>
                    <%-- 回复区 --%>
            </div>
            <hr>
        </c:forEach>

    </div>
</div>